.overlay {
    background-color: black;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    /*
    width:100px;
    border: 1px solid black;
    */
}

/*
    BEGIN:点型菊花loading样式
    在使用Safari和Chrome支持的webkit之前，
    最好也加上标准的CSS标签。
*/
@keyframes loading {
    from {
        opacity: 1;
        width: 2px;
        height: 2px;
    }
    to {
        opacity: 0.75; /*0.25*/
        width: 10px;
        height: 10px;
    }
}
@-webkit-keyframes loading {
    from {
        opacity: 1;
        width: 2px;
        height: 2px;
    }
    to {
        opacity: 0.75;
        width: 10px;
        height: 10px;
    }
}

div.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
}

div.spinner div {
    width: 10px;
    height: 10px;
    background: #007bff;
    /*#bbc2ca*/
    border: 1px solid #007bff;
    /*#fff*/
    position: absolute;
    left: 100%;
    top: 100%;
    opacity: 1.0;
    animation: loading 2s linear infinite;
    border-radius: 30px;
    -webkit-animation: loading 2s linear infinite;
    -webkit-border-radius: 30px;
}

div.spinner div.bar1 {
    transform: rotate(0deg) translate(0, -34px);
    animation-delay: -0s;
    -webkit-transform: rotate(0deg) translate(0, -34px);
    -webkit-animation-delay: -0s;
}

div.spinner div.bar2 {
    transform: rotate(30deg) translate(0, -34px);
    animation-delay: -1.8334s;
    -webkit-transform: rotate(30deg) translate(0, -34px);
    -webkit-animation-delay: -1.8334s;
}

div.spinner div.bar3 {
    transform: rotate(60deg) translate(0, -34px);
    animation-delay: -1.6668s;
    -webkit-transform: rotate(60deg) translate(0, -34px);
    -webkit-animation-delay: -1.6668s;
}

div.spinner div.bar4 {
    transform: rotate(90deg) translate(0, -34px);
    animation-delay: -1.5002s;
    -webkit-transform: rotate(90deg) translate(0, -34px);
    -webkit-animation-delay: -1.5002s;
}

div.spinner div.bar5 {
    transform: rotate(120deg) translate(0, -34px);
    animation-delay: -1.3336s;
    -webkit-transform: rotate(120deg) translate(0, -34px);
    -webkit-animation-delay: -1.3336s;
}

div.spinner div.bar6 {
    transform: rotate(150deg) translate(0, -34px);
    animation-delay: -1.167s;
    -webkit-transform: rotate(150deg) translate(0, -34px);
    -webkit-animation-delay: -1.167s;
}

div.spinner div.bar7 {
    transform: rotate(180deg) translate(0, -34px);
    animation-delay: -1.0004s;
    -webkit-transform: rotate(180deg) translate(0, -34px);
    -webkit-animation-delay: -1.0004s;
}

div.spinner div.bar8 {
    transform: rotate(210deg) translate(0, -34px);
    animation-delay: -0.8338s;
    -webkit-transform: rotate(210deg) translate(0, -34px);
    -webkit-animation-delay: -0.8338s;
}

div.spinner div.bar9 {
    transform: rotate(240deg) translate(0, -34px);
    animation-delay: -0.6672s;
    -webkit-transform: rotate(240deg) translate(0, -34px);
    -webkit-animation-delay: -0.6672s;
}

div.spinner div.bar10 {
    transform: rotate(270deg) translate(0, -34px);
    animation-delay: -0.5006s;
    -webkit-transform: rotate(270deg) translate(0, -34px);
    -webkit-animation-delay: -0.5006s;
}

div.spinner div.bar11 {
    transform: rotate(300deg) translate(0, -34px);
    animation-delay: -0.334s;
    -webkit-transform: rotate(300deg) translate(0, -34px);
    -webkit-animation-delay: -0.334s;
}

div.spinner div.bar12 {
    transform: rotate(330deg) translate(0, -34px);
    animation-delay: -0.1674s;
    -webkit-transform: rotate(330deg) translate(0, -34px);
    -webkit-animation-delay: -0.1674s;
}

/*END: 点型菊花loading*/